<template>
    <li :class="{'checked':Todos.done}" @click="Checkdone(Todos.id)">
        <p>{{Todos.title}}</p>

        <span @click="DelItem(Todos.id)" :title="title">&#xe66e;</span>
    </li>
</template>
<script>
export default {
    props:['Todos','CheckTodo','DelTodo'],
   data() {
      return {
          title:'删除此事项'
      }
   },
   created(){
   },
   computed:{
   },
   methods:{
       Checkdone(id){
           this.CheckTodo(id)
       },
       DelItem(id){
          if(confirm('是否删除？')){
              this.DelTodo(id)
          }
       }

   },
}
</script>
<style scoped>
#doingThings li{
    padding: .2%;
    position: relative;
    font-size:1.2em ;
    box-sizing: content-box;
    min-height:60px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(233, 233, 233) ;
    letter-spacing: 2px;
    border-bottom: #000 2px dashed;
}
#doingThings li:hover{
    background-color: rgb(167, 165, 165);
    
}


.checked{
    
    text-decoration: line-through;
}
span{
    top: 0;
    right: 0;
    position: absolute;
    font-family: 'iconfont';
    height: 100%;
    width: 8vh;
    display: none;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
span:hover{
    background-color: red;
}
</style>
